<template>
  <div class="a">
      <!-- 这里是轮播图 -->
       <cardplay></cardplay>
     <!-- v-for展示图片，n标记第几张，v-show用n==index表示显示第几张，setInterval定时播放。 -->
      <!-- <img :src="item" alt="" v-for="(item,index) in imglist" :key="index" v-show="n==index" class="b"> -->
      <!-- 这里是推荐歌单 -->
      <div>
          <span>推荐歌单</span>
          <div style="position: absolute;top:340px;right: 150px;">
                <router-link to="/alllist" style="color:blue">查看全部></router-link>
          </div>
          
      </div>
      
      <div class="cardgroup">
         <div class="card" v-for="(item,index) in cardlist" :key='index' @click='tomusiclist(item.id)'>
          <img :src="item.picUrl" alt="">
          <p>{{ item.name}}</p>
      </div>
      
      </div>
     
     
  </div>
</template>

<script>
import axios from "axios";
import cardplay from '../components/cardplay.vue'
export default {
     components:{
        cardplay
    },
    data(){
        return{
            cardlist:[]
        }
    },
    methods:{
     tomusiclist(id){
         this.$router.push({path:`/musiclist?q=${id}`})
     }
    
    },
    created(){
        // 推荐歌单数据
        axios({
            url:'https://autumnfish.cn/personalized',
            method:'get',
            params:{
                // 数据量
                limit:10
            },
        }).then(res=>{
            // console.log(res)
            this.cardlist=res.data.result
        })
    },
   
    
}
</script>

<style>
.b{
    width: 800px;
    height: 300px;
    position: relative;
    left: 150px;
   
}
.cardgroup div{
    float: left;
}
.card{
width: 200px;
height: 220px;
margin: 20px;
}
.card img{
    width: 200px;
    height: 200px;
    
}
.card p{
    width: 200px;
    display: block;

   overflow: hidden;

   white-space: nowrap;

   text-overflow: ellipsis;
}

</style>